<template>
    <div class="pack">
        <div ref="canvas_box" class="canvas_box"></div>
        <AudioVue ref="video" />
    </div>
</template>
<script>
import Vis from "vis";
import { fetchPost } from "../js/http";
import { card, wordMap } from "../store/storeTest";
import { Message } from "element-ui";
import AudioVue from "./Audio.vue";
import { loadingUtils } from "../js/loadUtils";

var netword = null;
export default {
    components: { AudioVue },
    data() {
        return {
            data: null,
            netword: null,
            card: card,
            loadingInstance: null,
            message: null
        };
    },
    mounted() {
        this.initNetword();
        loadingUtils.loading("单词图形加载中...");
        wordMap.mapEl = this;
    },
    methods: {
        initNetword() {
            fetchPost("/word/mapData").then(res => {
                let nodes = res.data.nodes;
                let edges = res.data.edges;
                edges.forEach(element => {
                    element["arrows"] = "to";
                    switch (element.type) {
                        case "SYNONYMS":
                            element["color"] = { color: "green" };
                            break;
                        case "TYPE":
                            element["color"] = { color: "pink" };
                            break;
                        case "FAMILY":
                            element["color"] = { color: "rgb(106, 198, 255)" };
                            break;
                    }
                });

                let $div = this.$refs.canvas_box;
                this.data = {
                    nodes: new Vis.DataSet(nodes),
                    edges: new Vis.DataSet(edges)
                };

                var options = {
                    interaction: { hover: true, navigationButtons: true },
                    manipulation: { enabled: true }
                };
                netword = new Vis.Network($div, this.data, options);
                netword.on("click", this.click);
                netword.once("stabilizationIterationsDone", this.done);
            });
        },
        click(params) {
            let edgeId = netword.getEdgeAt(params.pointer.DOM);
            let nodeId = netword.getNodeAt(params.pointer.DOM);
            if (nodeId) {
                let node = this.data.nodes.get(nodeId);
                this.$refs.video
                    .start()
                    .read(node.label)
                    .play();
                card.word.wordId = nodeId;
                this.$emit("toCard");
            } else if (edgeId) {
                let edge = this.data.edges.get(edgeId);
                if (edge.dbId) {
                    fetchPost("/word/getExplainDetail", {
                        detailId: edge.dbId
                    }).then(res => {
                        this.openCenter(res.data);
                    });
                }
            }
        },
        done() {
            loadingUtils.close();
        },
        moveToByNodeId(id) {
            netword.selectNodes([id]);
            netword.focus(id, { scale: 1.5 });
        },
        addData(data) {
            this.data.nodes.add(data.nodes);
            this.data.edges.add(data.edges);
        },
        openCenter(explainDetail) {
            if(this.message) {
                this.message.close();
            }
            // 显示时间10秒
            this.message = this.$message({
                message: explainDetail.explained,
                type: 'success',
                center: true,
                offset: 62,
                duration: 10000
            });

            this.$refs.video
                    .start()
                    .read(explainDetail.explained, 0.7)
                    .play(() => {
                       this.message.close();
                    });
        }
    }
};
</script>
<style scoped>
.pack {
    width: 100%;
    height: 100%;
}
.canvas_box {
    width: 100%;
    height: 100%;
}
</style>